<template>
    <!--电核 跟进中（待跟进）订单-->
    <div class="content_panel project_modules">
        <div class="content_panel_top">
            <h3 class="panel_title">
                <span>{{$t('tel.waitingList')}}</span>
            </h3>
            <el-form ref="form" :model="form" :inline="false" class="module_form">
                <el-row>
                    <el-col :span="5">
                        <el-form-item prop="phone" label="">
                            <el-input v-model="form.phone" :placeholder="$t('common.mobileNumber')" clearable></el-input><!--手机号码-->
                        </el-form-item>
                    </el-col>
                    <el-col :span="5">
                        <el-form-item prop="orderNid" label="">
                            <el-input v-model="form.orderNid" :placeholder="$t('common.innerOrderId')" clearable></el-input><!--内部订单号-->
                        </el-form-item>
                    </el-col>
                    <el-col :span="5">
                        <el-form-item prop="cardId" label="">
                            <el-input v-model="form.cardId" :placeholder="$t('common.identityNumber')" clearable></el-input><!--身份证号-->
                        </el-form-item>
                    </el-col>
                    <el-col :span="9">
                        <el-form-item prop="borrowTime" label=""><!--申请时间-->
                            <el-date-picker
                                    v-model="form.borrowTime"
                                    style="width:100%"
                                    type="datetimerange"
                                    format="yyyy-MM-dd HH:mm"
                                    :editable="false"
                                    range-separator="-"
                                    :default-time="['00:00:00', '23:59:59']"
                                    :start-placeholder="$t('common.applyStartTime')"
                                    :end-placeholder="$t('common.applyEndTime')"></el-date-picker>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="9">
                        <el-form-item prop="checkTime" label="" clearable><!--进件时间-->
                            <el-date-picker
                                    v-model="form.checkTime"
                                    style="width:100%"
                                    type="datetimerange"
                                    format="yyyy-MM-dd HH:mm"
                                    :editable="false"
                                    range-separator="-"
                                    :default-time="['00:00:00', '23:59:59']"
                                    :start-placeholder="$t('common.incomeStartTime')"
                                    :end-placeholder="$t('common.incomeEndTime')"></el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="5">
                        <el-form-item prop="reason" class="reason" label="">
                            <el-select v-model="form.reason" :placeholder="$t('common.reason')" clearable style="width: 100%">
                                <el-option v-for="item in reasonList" :key="item.dictCode" :value="item.dictCode" :label="item.dictCode + '-' + item.dictCodeNameReturn"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="5">
                        <el-form-item prop="throuType" class="throuType" label="">
                            <el-select v-model="form.throuType" :placeholder="$t('common.riskType')" clearable style="width: 100%">
                                <el-option key="1" :label="$t('common.pass')" value="1"></el-option>
                                <el-option key="2" :label="$t('common.refuse')" value="2"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="5">
                        <el-form-item prop="userType" class="userType" label="">
                            <el-select v-model="form.userType" :placeholder="$t('common.userType')" clearable style="width: 100%">
                                <el-option key="0" :label="$t('common.newUser')" value="0"></el-option>
                                <el-option key="1" :label="$t('common.secNewUser')" value="1"></el-option>
                                <el-option key="2" :label="$t('common.oldUser')" value="2"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="5">
                        <el-form-item prop="platform" class="platform" label="">
                            <el-select v-model="form.platform" :placeholder="$t('common.mobileType')" clearable style="width: 100%">
                                <el-option key="1" label="iOS" value="iOS"></el-option>
                                <el-option key="2" label="android" value="android"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <!--<el-col :span="5">-->
                        <!--<el-form-item prop="marketChannel" label="">-->
                            <!--<el-input v-model="form.marketChannel" placeholder="市场渠道" clearable></el-input>-->
                        <!--</el-form-item>-->
                    <!--</el-col>-->
                    <el-col :span="5">
                        <el-button @click="search" type="primary">{{ $t('common.search') }}</el-button>
                        <el-button @click="exportData" type="primary">{{ $t('common.export') }}</el-button>
                    </el-col>
                </el-row>
            </el-form>
        </div><!--content_panel_top-->
        <div class="module_content">
            <div class="content_panel project_modules">
                <div class="table_list">
                    <el-table ref="table" :data="tableData" style="width: 100%;" :max-height="tableMaxHeight" :highlight-current-row="true">
                        <el-table-column :label="$t('common.name')"  prop="userName" min-width="100"></el-table-column><!--姓名-->
                        <el-table-column prop="userId" label="User ID" min-width="80"></el-table-column>
                        <el-table-column prop="cardId" :label="$t('common.identityNumber')" min-width="160"><!--身份证号-->
                            <template slot-scope="{ row }"><a @click="goDetail(row)" type="text" size="small" v-if="row.cardId" href="javascript:void(0);">{{ row.cardId }}</a></template>
                        </el-table-column>
                        <el-table-column :label="$t('common.mobileNumber')" prop="phone" width="120"></el-table-column><!--手机号码-->
                        <el-table-column prop="throuType" :label="$t('common.riskType')" width="100"><!--风控类型-->
                            <template slot-scope="scope">
                                <span v-if="scope.row.throuType" :class="{ 'red_color' : scope.row.throuType === 2 }">{{ scope.row.throuType | switchThrouType }}</span>
                                <span v-else>{{ $t('common.pass' )}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="orderNid" :label="$t('common.innerOrderId')" width="180"></el-table-column><!--内部订单号-->
                        <el-table-column prop="borrowTime" :label="$t('common.applyDate')" min-width="160"><!--申请时间-->
                            <template slot-scope="{ row }">{{ row.borrowTime | formatDate('yyyy-MM-dd hh:mm:ss') }}</template>
                        </el-table-column>
                        <el-table-column prop="userType" :label="$t('common.userType')" min-width="100">
                            <template slot-scope="scope">{{ scope.row.userType | switchUserType }}</template><!--用户类型-->
                        </el-table-column>
                        <el-table-column prop="platform" :label="$t('common.mobileType')" min-width="100"></el-table-column><!--手机类型-->
                        <!--<el-table-column prop="marketChannel" label="市场渠道" width="180"></el-table-column>-->
                        <el-table-column prop="checkTime" :label="$t('tel.incomingTime')" min-width="160">
                            <template slot-scope="{ row }">{{ row.checkTime | formatDate('yyyy-MM-dd hh:mm:ss') }}</template><!--进件时间-->
                        </el-table-column>
                        <el-table-column prop="lastVerifyTime" :label="$t('tel.lastFollowTime')" min-width="160">
                            <template slot-scope="{ row }">{{ row.lastVerifyTime | formatDate('yyyy-MM-dd hh:mm:ss')}}</template><!--最后跟进时间-->
                        </el-table-column>
                        <el-table-column prop="followCount" :label="$t('tel.followTimes')" width="100"></el-table-column><!--跟进次数-->
                        <el-table-column :show-overflow-tooltip="true" prop="reason" :label="$t('common.reason')" min-width="300"><!--原因-->
                            <template slot-scope="scope">
                                <span v-for="(item,index) in scope.row.rciList" :key="index">{{ item.resonCodeReturn + '-' + item.reasonCode + ';' + ' ' }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column :show-overflow-tooltip="true" prop="remark" :label="$t('common.remark')" min-width="300">
                            <template slot-scope="scope">{{ scope.row.remark }}</template>
                        </el-table-column>
                    </el-table>
                    <!--分页组件-->
                    <pagination @pageChange="pageChange" :page="page"><!--分页组件--></pagination>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import Pagination from '@/components/pagination';
    import mixin from '@/service/mixin';

    let that = null;
    export default {
        name: 'telephone-telManage-waitingList',
        components: {
            Pagination,
        },
        mixins: [mixin],
        data() {
            return {
                form: {
                    orderNid: '',
                    phone: '',
                    cardId: '',
                    borrowTime: '',
                    borrowTimeStart: '',
                    borrowTimeEnd: '',
                    checkTime: '',
                    checkTimeStart: '',
                    checkTimeEnd: '',
                    throuType: '1',
                    platform: '',
                    marketChannel: '',
                },
                tableData: [],
                reasonList: [],
            };
        },
        methods: {
            // 获取原因码
            queryTelCode() {
                const params = {
                    dictType: 'WaitCode',
                };
                this.$api.tel.queryTelCode(params, {showLoading: false}).then((res) => {
                    const {status, data, error} = res;
                    if ('1' === status && error === '00000000') {
                        this.reasonList = data;
                    }
                });
            },
            // 获取列表数据
            getTableData(page = this.page) {
                const params = this.fillParams(page);
                this.$api.tel.queryCheckOrder(params).then(res => {
                    const {status, data, error} = res;
                    if ('1' === status && '00000000' === error && data) {
                        this.tableData = data.data || [];
                        this.page.recordsTotal = data.pageCount;
                    }
                    this.tableMaxHeight = document.body.clientHeight - 270;
                });
            },
            // 搜索列表数据
            search() {
                this.page.currentPage = 1;
                this.getTableData({currentPage: 1});
            },
            // 导出列表数据
            exportData() {
                const params = this.fillParams();
                if ((params.borrowTimeEnd === '' || params.borrowTimeStart === '') && params.cardId === '' && (params.checkTimeEnd === '' || params.checkTimeStart === '') && params.orderNid === '' && params.reason === '' && params.phone === '' && params.throuType === '' && params.userType === '' && params.platform === '' && params.marketChannel === '') {
                    this.$message.error(this.$t('verify.plsFirstAccordQuery'));
                    return
                }
                const user = this.$storage.get('user');
                params.token = user.token;
                const {$apiConf} = this;
                const url = this.$urlUtil.fillParams(params, $apiConf.baseUrl + $apiConf.urlType.tel.getCheckOrder, ['page']);
                this.$openNewBlank(url);
            },
            // 配置查询和导出参数
            fillParams(page = this.page) {
                const form = this.form;
                const params = {
                    checkStatus: '0',
                    orderNid: '',
                    phone: '',
                    cardId: '',
                    checkTimeStart: '',
                    checkTimeEnd: '',
                    borrowTimeStart: '',
                    borrowTimeEnd: '',
                    loginId: this.$storage.get('user').id,
                    reason: '',
                    throuType: '',
                    userType: '',
                    platform: '',
                    marketChannel: '',
                    page: {
                        pageNo: page.currentPage,
                        pageSize: this.page.pageSize
                    }
                };
                Object.keys(form).forEach(key => {
                    if (typeof form[key] === 'string' && form[key]) {
                        form[key] = form[key].trim();
                        params[key] = form[key];
                    }
                });
                if (form.checkTime) {
                    params.checkTimeStart = form.checkTime[0].getTime();
                    params.checkTimeEnd = form.checkTime[1].getTime();
                }
                if (form.borrowTime) {
                    params.borrowTimeStart = form.borrowTime[0].getTime();
                    params.borrowTimeEnd = form.borrowTime[1].getTime();
                }
                return params;
            },
            goDetail(row) {
                this.$openNewBlank(`#/conf/telephone/tel-manage/tel-detail/${row.userId}/${row.orderNid}/${row.checkStatus}`);
            },
        },
        filters: {
            // 用户类型
            switchUserType(type) {
                switch (+type) {
                    case 0:
                        return that.$t('common.newUser');// 新户
                    case 1:
                        return that.$t('common.secNewUser');// 次新户
                    case 2:
                        return that.$t('common.oldUser');// 老户
                    default:
                        return '';
                }
            },
            // 风控类型
            switchThrouType(type) {
                switch (+type) {
                    case 1:
                        return that.$t('common.pass');// 通过
                    case 2:
                        return that.$t('common.refuse');// 拒绝
                    default:
                        return '';
                }
            },
        },
        created() {
            that = this;
            this.getTableData();
            this.queryTelCode();
        }
    }
</script>
<style lang="scss">
    [data-page=telephone-telManage-waitingList] {
        .el-table .red_color {
            color: #FF4949;
        }
        .el-col {
            padding-left: 10px;
        }
        .el-table .cell, .el-table th > .cell {
            word-break: keep-all;
            word-wrap: break-word;
        }
        .el-tooltip__popper {
            max-width: 300px;
            word-break: break-all;
            background-color: #fff;
            box-shadow: 0px 0px 5px #ccc;
            color: #000;
        }
    }
</style>

